<template>
  <!--产品管理-->
  <div class="product-admin">
    <div class="product-admin-header">
      <div class="header-tip">
        总计
        <span class="header-tip-nember">{{ productList?.total }}</span> 个产品
      </div>
      <div class="header-tip-botton">
        <el-button
          color="rgb(222, 41, 16)"
          type="primary"
          @click="addProduct"
          v-if="permissionState.update"
          ><el-icon><Plus /></el-icon>新建产品</el-button
        >
        <el-button color="rgb(222, 41, 16)" type="primary">导出excel</el-button>
      </div>
    </div>
    <div class="product-admin-table">
      <el-table
        :data="productList?.list"
        stripe
        border
        style="width: 98%"
        :header-cell-style="tableHeaderColor"
        :cell-style="cellStyle"
        max-height="60vh"
      >
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="name" label="产品名称" width="180" />
        <el-table-column prop="abbreviation" label="产品简称" />
        <el-table-column prop="businessTypeName" label="业务类型" />
        <el-table-column prop="state" label="产品状态" width="180">
          <template #default="scoped">
            <el-switch
              v-model="scoped.row.state"
              class="mb-2"
              size="small"
              style="
                --el-switch-on-color: rgb(0, 128, 255);
                --el-switch-off-color: #ff4949;
              "
              @change="changeProductState(scoped.row.id, scoped.row.state)"
            />
            <span
              style="color: rgb(0, 128, 255); margin-left: 10px"
              v-if="scoped.row.state"
              >有效</span
            >
            <span
              style="color: rgb(219, 0, 64); margin-left: 10px"
              v-if="!scoped.row.state"
              >无效</span
            >
          </template>
        </el-table-column>

        <el-table-column prop="creatorName" label="创建人" />
        <el-table-column prop="createAt" label="创建时间" />
        <el-table-column
          fixed="right"
          label="操作"
          min-width="120"
          v-if="permissionState.update || permissionState.delete"
        >
          <template #default="scoped">
            <el-button
              link
              type="primary"
              size="small"
              @click="eidtProduct(scoped.row.id)"
              v-if="permissionState.update"
            >
              <span style="color: rgb(222, 41, 16)">编辑</span>
            </el-button>
            <el-button
              link
              type="info"
              size="small"
              disabled
              v-if="permissionState.delete && scoped.row.state"
              >删除</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              v-if="permissionState.delete && !scoped.row.state"
              @click="deleteProduct(scoped.row.id)"
            >
              <span style="color: rgb(222, 41, 16)">删除</span></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="product-admin-pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="productList?.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import http from "@/request/request";
import { Data } from "@/request/pageData";
import { Permission } from "@/util/LocalStorgeGetPermission";

const router = useRouter();

interface Product {
  nember: number;
  name: string;
  abbreviation: string;
  state: boolean;
  businessTypeName: string;
  createTime: string;
}
//---------------------------------变量----------------------------------//
// table样式
const tableHeaderColor = {
  background: "rgb(245, 248, 250) !important",
  color: "rgb(51, 51, 51)",
  "text-align": "center",
};
const cellStyle = {
  "text-align": "center",
};
const productList = ref<Data<Product>>();
const currentPage = ref(1);
const pageSize = ref(10);
const permissionState = ref({
  insert: false,
  update: false,
  delete: false,
});
//-------------------------------------方法------------------------------//
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getProductList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getProductList();
};
// 新建产品
const addProduct = () => {
  router.push("/productEdit");
};
// 修改产品信息
const eidtProduct = (id: number) => {
  router.push("/productEdit?id=" + id);
};

// 修改状态
const changeProductState = async (id: number, state: boolean) => {
  console.log(id, state);
  try {
    await http.post("/api/system/updateProductStatus", {
      id,
      state,
    });
    getProductList();
  } catch (err) {
    console.log(err);
  }
};
// 删除产品
const deleteProduct = async (id: number) => {
  try {
    await http.post("/api/system/deleteProduct?productId=" + id);
    getProductList();
  } catch (err) {
    console.log(err);
  }
};
// 查询产品列表
const getProductList = async () => {
  try {
    const { data } = await http.get<Data<Product>>(
      "/api/system/getProductListByNameOrState",
      {
        // orgId: 1,
        page: currentPage.value,
        pageSize: pageSize.value,
      }
    );
    productList.value = data;
  } catch (err) {
    console.log(err);
  }
};
onMounted(() => {
  const p = new Permission("/product").getPermission();
  if (!p) {
    router.push("/");
  } else {
    permissionState.value = p;
    getProductList();
  }
});
</script>

<style lang="less" scoped>
.product-admin {
  background-color: rgb(255, 255, 255);
  width: 97%;
  height: 96%;
  padding: 20px;
}
.product-admin-header {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  .header-tip {
    width: 8%;
    .header-tip-nember {
      color: rgb(64, 158, 255);
    }
  }
  .header-tip-botton {
    width: 90%;
    display: flex;
    justify-content: end;
  }
}
.product-admin-pagination {
  position: absolute;
  right: 2%;
  top: 90%;
}
</style>